<template>
	<view class="content">
		<view class="nav-bar">
			<view class="nav-bar-back" @click="goback">
				<u-icon name="arrow-leftward" size="45rpx"></u-icon>
				<text class="nav-bar-back-title">评论({{ total }})</text>
			</view>
			<view class="share">
				<u-icon name="share" size="55rpx"></u-icon>
			</view>
		</view>

		<!-- 歌手图片 -->
		<view class="message">
			<view class="message-left">
				<u-image :src="songmsg.coverImgUrl" width="200rpx" height="200rpx" radius="10" mode="widthFix" lazyLoad></u-image>
				<view class="message-left-text">
					<text>{{ songmsg.name }}</text>
					<text class="message-left-text-by">by {{ songmsg.creator.nickname }}</text>
				</view>
			</view>
			<view class="message-right">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<!--tab-->
		<view class="comments">
			<view class="content-comment">
				<u--text text="评论区" size="30rpx"></u--text>
				<view class="content-comment-tabs">
					<u-tabs :list="tabList" @change="change"></u-tabs>
				</view>
			</view>
			<component :is="tabList[current].componentName"></component>
		</view>

		<!-- 展示评论内容 -->
		<!-- <view class="newest" v-if="current==0">
			<hot-comments :hotComments="hotComments"></hot-comments>
		</view>
		<view class="newest" v-if="current==1">
			<new-comments :newComments="newComments"></new-comments>
		</view> -->
	</view>
</template>

<script>
import moment from 'moment';
import { playcomments } from '@/http/songs.js';

import HotComments from './components/HotComments';
import NewComments from './components/NewComments.vue';

export default {
	components: {
		HotComments,
		NewComments
	},
	data() {
		return {
			id: '', //传过来的歌单id
			total: '', //总评论数
			hotComments: [], //热门评论
			newComments: [], //最新评论
			songmsg: uni.getStorageSync('songsData'), //获取歌单的信息
			current: 0, //下标值
			tabList: [
				{
					name: '最新',
					isActive: true,
					componentName: HotComments
				},
				{
					name: '最热',
					componentName: NewComments
				}
			], //tab切换
			limit: 20,
			offset: 1, // 分页参数
			before: '', // 总的分页数
			comments: [],
			isFixed: 0
		};
	},
	onLoad(eve) {
		this.id = eve.id;
	},
	created() {
		this.playcomments();
		// this.getNewcomment()
	},
	//上拉加载更多
	onReachBottom() {
		console.log('到底啦');
		if (this.total <= this.offset * 20) {
			//如果当前的评论 总数 <= 当前的偏移量 * 20 那么就直接打开 底线
			return (this.isFooter = true); //打开底部底线
		}
		// this.current = 1
		this.offset++;
		this.getNewcomment();
	},

	methods: {
		// 获取评论信息
		async playcomments() {
			const res = await playcomments(this.id, this.limit);
			if (res.code !== 200) {
				return uni.showToast({
					title: '网络正在开小差~请稍后再试！',
					icon: 'none'
				});
			}
			this.total = res.total;
			this.hotComments = res.hotComments;
			this.newComments = res.comments;
			this.before = res.comments[19].time;
			// console.log(this.before );
		},

		// 获取下拉刷新数据
		async getNewcomment(callBack) {
			const res = await this.$request({
				url: `/comment/playlist?id=${this.id}&limit=${this.limit}&offset=${this.offset + '&before=' + this.before}`
			});
			if (res.code !== 200) {
				return uni.showToast({
					title: '网络正在开小差~请稍后再试！',
					icon: 'none'
				});
			}
			this.newComments = [...this.newComments, ...res.comments];
			if (res.comments.length < 20) return; //如果获取到的长度 < 20 直接return
			this.before = res.comments[19].time; //否则取第十九条的 time 做下一次的请求
			callBack && callBack();
		},

		//返回上一页
		goback() {
			uni.navigateBack({
				data: 1
			});
		},
		//点击选中哪个tab为激活状态
		change(event) {
			this.tabList.forEach((tab) => (tab.isActive = false));
			let index = event.index;
			this.tabList[index].isActive = true;
			this.current = index;
		}
	},
	//过滤器
	filters: {
		count(v) {
			return v > 100000 ? (v / 10000).toFixed(1) + '万' : v;
		},
		time(time) {
			return moment(time).format('YYYY-MM-DD'); // 2021/08/21
		}
	}
};
</script>

<style lang="scss">
//手机导航高度
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}

.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	box-sizing: border-box;
	height: 45px;
	position: sticky;
	top: 0rpx;
	z-index: 999;
	background-color: #f6f6f6;

	&-back {
		display: flex;

		&-title {
			font-size: 35rpx;
			margin-left: 30rpx;
		}
	}
}

.newest {
	padding: 30rpx 30rpx;
}

// 歌单信息
.message {
	display: flex;
	justify-content: space-between;

	&-left {
		display: flex;
		padding: 15rpx 35rpx;

		&-text {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;

			&-by {
				margin-top: 12rpx;
				font-size: 12px;
			}
		}
	}

	&-right {
		padding-right: 35rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.content {
	background-color: #f6f6f6;
	font-family: STXihei;
	min-height: 100vh;
	// 导航栏

	// 评论区title和tabs
	&-comment {
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 30rpx;
		position: sticky;
		top: 49rpx;
		z-index: 2;

		&-tabs {
			text {
				padding: 0 10rpx;
			}
		}
	}

	&-total {
		width: 100%;

		// padding: 0 30rpx;
		&-item {
			display: flex;
			flex-direction: column;

			&-upper {
				display: flex;
				justify-content: space-between;
				height: 60px;

				&-all {
					display: flex;
					padding: 15rpx 15rpx;

					&-text {
						margin: 10rpx 25rpx;
						display: flex;
						flex-direction: column;
					}
				}

				&-icon {
					margin-top: 25rpx;
					display: flex;
					height: 25px;

					text {
						margin: 8rpx 12rpx;
					}
				}
			}

			&-title {
				font-size: 20rpx;
				width: 70%;
				margin: 15px auto;
				// margin-left: 110rpx;
				// font-family: FangSong_GB2312;
				border-bottom: 1px solid #efedee;
				padding: 10rpx 0;
			}
		}
	}
}
</style>
